import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'

function App() {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('light')

  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setTheme(e.target.value)
    document.documentElement.setAttribute('data-theme', e.target.value)
  }

  return (
    <div data-theme={theme} className="min-h-screen flex flex-col items-center justify-center p-4">
      <div className="flex gap-4 mb-8">
        <a href="https://vite.dev" target="_blank" className="hover:opacity-80 transition-opacity">
          <img src={viteLogo} className="h-24" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank" className="hover:opacity-80 transition-opacity">
          <img src={reactLogo} className="h-24 animate-spin-slow" alt="React logo" />
        </a>
      </div>
      <h1 className="text-4xl font-bold mb-8">Vite + React</h1>
      <div className="card bg-base-200 p-6 rounded-box shadow-md mb-8">
        <button 
          onClick={() => setCount((count) => count + 1)}
          className="btn btn-primary"
        >
          Count is {count}
        </button>
        <p className="mt-4 text-sm">
          Edit <code className="font-mono bg-base-300 p-1 rounded">src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <div className="theme-switcher">
        <select 
          value={theme} 
          onChange={handleThemeChange}
          className="select select-bordered w-full max-w-xs"
        >
          <option value="light">Light</option>
          <option value="dark">Dark</option>
          <option value="cupcake">Cupcake</option>
        </select>
      </div>
      <p className="text-sm opacity-70 mt-4">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App
